import React,{ useState } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import './myRate.scss';
const MyRate = (props) => {
    const [rateNum,setRateNum] = useState(props.value);
    const [clickValue,setClickValue] = useState(props.value);
    const stars = [];
    const handleLeave = (i) => {
        setRateNum(className);
    }
    const handleEnter = (i) => {
        setRateNum(i);
    }
    for(let i=1;i<=props.count;i++){
        const rateClass = classnames({
            active: rateNum >= i
        })
        stars.push(<i key={i} className={rateClass} onMouseEnter={() =>  setRateNum(i)} onMouseLeave={() => setRateNum(clickValue)} onMouseDown={() => {setClickValue(i);props.onChange(i)} }>{props.children}</i>);
    }

    return (
        <div className="my-rate">
            {stars}
        </div>
    );
};

export default MyRate;